<?php print render($page['navigation']); ?>

<div id="page">
    <?php print render($page['help']); ?>

    <header class="header" id="header" role="banner">
        <div class="wrapper">

            <div class="menu-trigger"></div>
            <div class="search-trigger"></div>
            <div class="font-size-trigger"></div>
            <?php if ($logo): ?>
            <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" class="header__logo" id="logo">
                <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" class="header__logo-image" />
            </a>
            <?php endif; ?>

            <?php print render($page['header']); ?>

        </div>
    </header>

    <div id="main" ng-app="stylebook" ng-controller="stylebookController">
        <?php print $messages; ?>
        <?php print render($page['highlighted']); ?>

        <?php if ($title): ?>
        <h1 class="page__title title element-invisible" id="page-title"><?php print $title; ?></h1>
        <?php endif; ?>

        <?php print $breadcrumb; ?>
        <?php print render($tabs); ?>
        <?php if ($action_links): ?>
        <ul class="action-links"><?php print render($action_links); ?></ul>
        <?php endif; ?>

        <div id="content" class="column region-content" role="main">
            <article class="app" id="stylebook-app" ng-app="stylebook" ng-controller="stylebookController">
                    <div class="article-inner">
                        <div class="section-head">
                            <h1 class="title">Style Item</h1>
                            <h2 class="view-count"></h2>
                        </div>

                        <div class="trigger-filter" ng-click="popupOpen()">Refine</div>

                        <div class="gender-tabs">
                            <?php print _get_mobile_gender_tabs(); ?>
                        </div>


                        <?php print render($page['content']); ?>

                        <div id="block-jessica-stylebook-article-stylebook-menu-block" class="block block-jessica-stylebook first last odd" ng-show="popuping" ng-cloak>
                            <div class="wrapper">


                                <section class="filter-board filter-main" ng-show="board == 'looks'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-title left">Looks</div>
                                        <div class="filter-board-close" ng-click="popupClose()"></div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-main-grp">
                                            <div class="filter-main-item" ng-click="goBoard('gender')">
                                                <span class="filter-main-item-label">Gender</span>
                                                <span class="filter-main-value" ng-bind="data.gender.selected.name"></span>
                                            </div>
                                        </div>
                                        <div class="filter-main-grp">
                                            <h4 class="filter-main-head">Items</h4>
                                            <div class="filter-main-item" ng-click="goBoard('cat')">
                                                <span class="filter-main-item-label">Category</span>
                                                <span class="filter-main-value" ng-bind="data.cat.selected.name"></span>
                                            </div>
                                            <div class="filter-main-item" ng-click="goBoard('color')">
                                                <span class="filter-main-item-label">Color</span>
                                                <span class="filter-main-value" ng-bind="data.color.selected.name"></span>
                                            </div>
                                            <div class="filter-main-item" ng-click="goBoard('brand')">
                                                <span class="filter-main-item-label">Brands</span>
                                                <span class="filter-main-value" ng-bind="data.brand.selected.name"></span>
                                            </div>
                                        </div>
                                        <div class="filter-main-grp">
                                            <h4 class="filter-main-head">Items</h4>
                                            <div class="filter-main-item" ng-click="goBoard('season')">
                                                <span class="filter-main-item-label">Season</span>
                                                <span class="filter-main-value" ng-bind="data.season.selected.name"></span>
                                            </div>
                                        </div>
                                        <div class="filter-main-grp">
                                            <h4 class="filter-main-head">Other search</h4>
                                            <div class="filter-main-item" ng-click="goBoard('height')">
                                                <span class="filter-main-item-label">Height</span>
                                                <span class="filter-main-value" ng-bind="data.height.selected.name"></span>
                                            </div>
                                            <div class="filter-main-item" ng-click="goBoard('age')">
                                                <span class="filter-main-item-label">Age</span>
                                                <span class="filter-main-value" ng-bind="data.age.selected.name"></span>
                                            </div>
                                            <div class="filter-main-item" ng-click="goBoard('hairstyle')">
                                                <span class="filter-main-item-label">Hairstyle</span>
                                                <span class="filter-main-value" ng-bind="data.hairstyle.selected.name"></span>
                                            </div>
                                            <div class="filter-main-item" ng-hide="true" ng-click="goBoard('size')">
                                                <span class="filter-main-item-label">Size</span>
                                                <span class="filter-main-value" ng-bind="data.size.selected.name"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="filter-board-foot">
                                        <div class="filter-board-reset" ng-click="reset()">Reset</div>
                                        <div class="filter-board-refine" ng-click="refine()">Refine</div>
                                    </div>
                                </section>


                                <section class="filter-board filter-gender" ng-show="board == 'gender'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Gender</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-radio" ng-repeat="(k,v) in data.gender.items">
                                            <label>
                                                <input type="radio" ng-model="data.gender.selected" ng-value="v">
                                                <span ng-bind="v.name"></span>
                                            </label>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-category" ng-show="board == 'cat'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Category</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div ng-repeat="(k,v) in data.cat.items">
                                            <div ng-if="!v.items" class="filter-radio">
                                                <label>
                                                    <input type="radio" ng-model="data.cat.selected" ng-value="v">
                                                    <span ng-bind="v.name"></span>
                                                </label>
                                            </div>
                                            <div ng-if="v.items" class="filter-accordion">
                                                <div class="filter-accordion-toggle" ng-click="accordionToggle($event)">
                                                    <img ng-src="{{v.url}}" alt="">
                                                    <span ng-bind="v.name"></span>
                                                </div>
                                                <div class="filter-accordion-children">
                                                    <div class="filter-radio" ng-repeat="(kk,vv) in v.items">
                                                        <label>
                                                            <input type="radio" ng-model="data.cat.selected" ng-value="vv">
                                                            <span ng-bind="vv.display || vv.name"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-color" ng-show="board == 'color'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Color</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-color-item" ng-repeat="(k,v) in data.color.items" ng-class="v.name | kebab">
                                            <label>
                                                <input type="radio" ng-model="data.color.selected" ng-value="v" />
                                                <div class="filter-color-palette" style="background:{{v.hex}};"></div>
                                                <div class="filter-color-name" ng-bind="v.name"></div>
                                            </label>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-brands" ng-show="board == 'brand'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Brands</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-brand-search">
                                            <input type="text" ng-model="searchBrand" placeholder="Enter brand" />
                                        </div>
                                        <div class="filter-brand-result">
                                            <div class="filter-brand-result-head">Top 100 brands styled</div>
                                            <div class="filter-brand-result-inner">
                                                <div class="filter-brand-loading" ng-show="brandLoading"></div>
                                                <div class="filter-brand-row" ng-repeat="(k,v) in data.brand.items">
                                                    <label>
                                                        <input type="radio" ng-model="data.brand.selected" ng-value="v" />
                                                        <div class="filter-brand-name" ng-bind="v.name"></div>
                                                        <div class="filter-brand-count" ng-if="v.looks && v.items">
                                                            <strong ng-bind="v.looks"></strong> Looks &nbsp;
                                                            <strong ng-bind="v.items"></strong> Items
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-season" ng-show="board == 'season'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Season</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-radio" ng-repeat="(k,v) in data.season.items">
                                            <label>
                                                <input type="radio" ng-model="data.season.selected" ng-value="v">
                                                <span ng-bind="v.name"></span>
                                            </label>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-height" ng-show="board == 'height'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Height</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-radio" ng-repeat="(k,v) in data.height.items">
                                            <label>
                                                <input type="radio" ng-model="data.height.selected" ng-value="v">
                                                <span ng-bind="v.name"></span>
                                            </label>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-age" ng-show="board == 'age'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Age</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-radio" ng-repeat="(k,v) in data.age.items">
                                            <label>
                                                <input type="radio" ng-model="data.age.selected" ng-value="v">
                                                <span ng-bind="v.name"></span>
                                            </label>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-hairstyle" ng-show="board == 'hairstyle'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Hairstyle</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-radio" ng-repeat="(k,v) in data.hairstyle.items">
                                            <label>
                                                <input type="radio" ng-model="data.hairstyle.selected" ng-value="v">
                                                <span ng-bind="v.name"></span>
                                            </label>
                                        </div>
                                    </div>
                                </section>


                                <section class="filter-board filter-size" ng-show="board == 'size'">
                                    <div class="filter-board-head">
                                        <div class="filter-board-cancel" ng-click="cancel()">Cancel</div>
                                        <div class="filter-board-title">Size</div>
                                        <div class="filter-board-done" ng-click="done()">Done</div>
                                    </div>
                                    <div class="filter-board-inner">
                                        <div class="filter-radio" ng-repeat="(k,v) in data.size.items">
                                            <label>
                                                <input type="radio" ng-model="data.size.selected" ng-value="v">
                                                <span ng-bind="v.name"></span>
                                            </label>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>




                        <?php
                        /*
                            $sidebar_first  = render($page['sidebar_first']);
                            if ($sidebar_first) {
                                print $sidebar_first;
                            }
                        */
                        ?>


                    </div>
            </article>
        </div>
        <?php //print render($page['below_content']); ?>
        <?php print render($page['bottom']); ?>
        <?php print render($page['footer']); ?>
    </div>
</div>

<?php print render($page['popup']); ?>
<?php print render($page['overlay']); ?>
<?php print render($page['hidden']); ?>
